<template>
  <div class="DecisionMaker">
    <div class="mian">
      <div class="left">
        <h1>基础信息</h1>
        <template>
          <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
            <el-tab-pane label="档案信息" name="first">
              <div style="min-height: 350px">
                <div class="option">
                  <div class="left">
                    <div class="title">档案号</div>
                    <div class="content">{{aa.tMemberId}}</div>
                  </div>
                  <div class="right">
                    <div class="title">姓名</div>
                    <div class="content">{{user.name}}</div>
                  </div>
                </div>
                <div class="option">
                  <div class="left">
                    <div class="title">性别</div>
                    <div class="content">{{user.sex==1?"男":"女"}}</div>
                  </div>
                  <div class="right">
                    <div class="title">年龄</div>
                    <div class="content">{{user.age}}</div>
                  </div>
                </div>
                <div class="textarea">
                  <div class="title">疾病史</div>
                  <textarea name="" v-model="aa.medicalHistory"></textarea
                  >
                </div>
                <div class="textarea">
                  <div class="title">遗传史</div>
                           <textarea name="" v-model="aa.familyHistory"></textarea>

                </div>
                <div class="textarea">
                  <div class="title">手术史</div>
                             <textarea name="" v-model="aa.previousHistory"></textarea>

                </div>
                <el-button round class="but">取 消</el-button>
              </div>
            </el-tab-pane>
            <el-tab-pane label="体检信息" name="second">
       <table class="table table-hover">
	            <thead>
				<td v-for="(item) in this.src" :key="item.id">
				  <img style="height:250px;width: 200px;" :src="'http://localhost:8085/img/'+(item.src)"/>
				</td>
	            </thead>
	        </table>
              <el-button class="but">取 消</el-button>
            </el-tab-pane>
            <el-tab-pane label="评估信息" name="third">
              <template>
                <el-table
                  style="width: 100%"
                  align="center"
                  :data="tbodytypeValue"
                >
                  <el-table-column label="档案号" prop="tMemberId" width="">
                  </el-table-column>
                  <el-table-column label="体检人姓名" prop="tBodyName" width="">
                  </el-table-column>
                  <el-table-column
                    label="体质评估时间"
                    prop="createtime"
                    width=""
                  >
                  </el-table-column>
                  <el-table-column label="气虚质" prop="tQiAsthenia" width="">
                    <template slot-scope="scope">
                      <span v-if="scope.row.tQiAsthenia <= '2'"> 否 </span>
                      <span v-if="scope.row.tQiAsthenia > '2'"> 是 </span>
                    </template>
                  </el-table-column>
                  <el-table-column label="阳虚质" prop="tYangQuality" width="">
                    <template slot-scope="scope">
                      <span v-if="scope.row.tYangQuality <= '2'"> 否 </span>
                      <span v-if="scope.row.tYangQuality > '2'"> 是 </span>
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="阴虚质"
                    prop="tYinDeficiency"
                    width=""
                  >
                    <template slot-scope="scope">
                      <span v-if="scope.row.tYinDeficiency <= '2'"> 否 </span>
                      <span v-if="scope.row.tYinDeficiency > '2'"> 是 </span>
                    </template>
                  </el-table-column>
                </el-table>
              </template>
              <template>
                <el-table
                  style="width: 100%"
                  align="center"
                  :data="tmentalityValue"
                >
                  <el-table-column label="档案号" prop="tMemberId" width="">
                  </el-table-column>
                  <el-table-column
                    label="体检人姓名"
                    prop="tMemberName"
                    width=""
                  >
                  </el-table-column>
                  <el-table-column
                    label="心理评测时间"
                    prop="createtime"
                    width=""
                  >
                  </el-table-column>
                  <el-table-column label="是否强迫症化" prop="tOcd" width="">
                    <template slot-scope="scope">
                      <span v-if="scope.row.tOcd <= '2'"> 否 </span>
                      <span v-if="scope.row.tOcd > '2'"> 是 </span>
                    </template>
                  </el-table-column>
                  <el-table-column label="是否焦虑化" prop="tAnxiety" width="">
                    <template slot-scope="scope">
                      <span v-if="scope.row.tAnxiety <= '2'"> 否 </span>
                      <span v-if="scope.row.tAnxiety > '2'"> 是 </span>
                    </template>
                  </el-table-column>
                  <el-table-column label="是否恐怖化" prop="tTerror" width="">
                    <template slot-scope="scope">
                      <span v-if="scope.row.tTerror <= '2'"> 否 </span>
                      <span v-if="scope.row.tTerror > '2'"> 是 </span>
                    </template>
                  </el-table-column>
                </el-table>
              </template>
              <el-button round class="but">取 消</el-button>
            </el-tab-pane>
          </el-tabs>
        </template>
      </div>
      <div class="rigth">
        <h1>干预方案</h1>
        <template>
          <el-tabs v-model="activeName2" type="card" @tab-click="handleClick2">
            <el-tab-pane label="基本信息" name="first2">
              <div style="min-height: 350px">
                <div class="option">
                  <div class="left">
                    <div class="title">档案号</div>
                    <div class="content">
                      <span>{{ user.tmerber }}</span>
                    </div>
                  </div>
                  <div class="right">
                    <div class="title">姓名</div>
                    <div class="content">
                      <span>{{ user.name }}</span>
                    </div>
                  </div>
                </div>
                <div class="option">
                  <div class="left">
                    <div class="title">性别</div>
                    <div class="content">
                      <span>{{ user.sex ==1?"男":"女"}}</span>
                    </div>
                  </div>
                  <div class="right">
                    <div class="title">年龄</div>
                    <div class="content">
                      <span>{{ user.age }}</span>
                    </div>
                  </div>
                </div>
                <div class="option">
                  <div class="left">
                    <div class="title">方案标题</div>
                    <div class="content">
                      <el-input v-model="input" :disabled="true"> </el-input>
                    </div>
                  </div>
                  <div class="right">
                    <div class="title">选用模板</div>
                    <div class="content">
                      <template>
                        <el-select
                          v-model="value"
                          clearable
                          placeholder="请选择"
                          @change="selectption(value)"
                        >
                          <el-option
                            v-for="item in options"
                            :key="item.ttemplateid"
                            :label="item.keywords"
                            :value="item"
                          >
                          </el-option>
                        </el-select>
                      </template>
                    </div>
                  </div>
                </div>
                <div class="option">
                  <div class="left">
                    <div class="title">开始时间</div>
                    <div class="content">
                      <el-date-picker
                        type="date"
                      :picker-options="pickerOptions1" 
    start-placeholder="请选择执行开始时间"
     value-format="yyyy-MM-dd" 
     
       placeholder="选择日期" 
                        v-model.trim="createDate"
                      >
                      </el-date-picker>
                    </div>
                  </div>
                  <div class="right">
                    <div class="title">结束时间</div>
                    <div class="content">
                      <el-date-picker
                        type="date"
                        v-model="endDate"
                        placeholder="选择日期"
                        style="width: 150px"
                      >
                      </el-date-picker>
                    </div>
                  </div>
                </div>
                <div class="textarea">
                  <div class="title">方案目标</div>
                  <textarea v-model="texta" :disabled="true"> </textarea>
                </div>
                <div class="Text">
                  <div>执行人</div>
                  <div>张三</div>
                </div>
              </div>
              <div class="but">
                <el-button round>取 消</el-button>
                <el-button round type="primary" @click.native="save()"
                  >保存</el-button
                >
              </div>
            </el-tab-pane>
            <el-tab-pane label="饮食干预" name="third2">
              <el-container>
                <el-input
                  style="width: 20%"
                  placeholder="编号/名称"
                  v-model="parameter2.content"
                  clearable
                ></el-input>
                <el-button
                  type="primary"
                  size="mini"
                  @click="onSubmit"
                  icon="el-icon-search"
                  round
                  >查询</el-button
                >
              </el-container>
              <el-table
                style="width: 100%"
                align="center"
                :data="AllTMeals"
                ref="zttable"
                @selection-change="handleSelectionTMealsChange"
                
              >
                <el-table-column
                  type="selection"
                  width="55"
                  :selectable="selectable"
            
                >
                </el-table-column>
                <el-table-column label="编号" prop="code" width="120">
                </el-table-column>
                <el-table-column label="名称" prop="name" width="120">
                </el-table-column>
                <el-table-column
                  label="类别"
                  prop="tmealsType.name"
                  width="120"
                >
                </el-table-column>
                <el-table-column label="食品说明" prop="explain" width="120">
                </el-table-column>
              </el-table>
              <el-pagination
                :total="total1"
                @size-change="handleSizeChange1"
                @current-change="handleCurrentChange1"
                :current-page.sync="parameter2.page"
                :page-sizes="[2, 5, 10, 20]"
                :pager-count="9"
                background
                :page-size.sync="parameter2.num"
                layout="total, sizes, prev, pager, next, jumper"
              >
              </el-pagination>
            </el-tab-pane>

            <el-tab-pane label="运动干预" name="second2">
              <el-container>
                <el-input
                  style="width: 20%"
                  placeholder="编号/名称"
                  v-model="parameter3.content"
                  clearable
                ></el-input>
                <el-button
                  type="primary"
                  size="mini"
                  @click="onSubmittMentality"
                  icon="el-icon-search"
                  round
                  >查询</el-button
                >
              </el-container>
              <el-table
                style="width: 100%"
                align="center"
                :data="AllTSportsItem"
                ref="zttable2"
                @selection-change="handleSelectionTSportsItemChange"
           
              >
                <el-table-column
                  type="selection"
                  width="55"
                  :selectable="selectable"
         
                >
                </el-table-column>
                <el-table-column label="编号" prop="code" width="120">
                </el-table-column>
                <el-table-column label="名称" prop="name" width="120">
                </el-table-column>
                <el-table-column label="项目强度" prop="strength" width="120">
                </el-table-column>
                <el-table-column label="注意事项" prop="notes" width="120">
                </el-table-column>
              </el-table>
              <el-pagination
                :total="total2"
                @size-change="handleSizeChange2"
                @current-change="handleCurrentChange2"
                :current-page.sync="parameter3.page"
                :page-sizes="[2, 5, 10, 20]"
                :pager-count="9"
                background
                :page-size.sync="parameter3.num"
                layout="total, sizes, prev, pager, next, jumper"
              >
              </el-pagination>
            </el-tab-pane>
          </el-tabs>
        </template>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import axios from "axios";
export default Vue.extend({
  data() {
    return {
       pickerOptions1: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 8.64e7
        }
      },
      listLoading: false,
      value: '',
      options: [],
      input: "",
      value1:[],
      tdiettemplateselecteds: [],
      tmovingtemplateselections: [],
      activeName: "first",
      activeName2: "first2",
      tInterposeClassify: "",
      multipleSelection1: [],
      multipleSelection2: [],
      tbodytypeValue: [],
      tmentalityValue: [],
      AllTMeals: [],
      AllTSportsItem: [],
      user: {
        sex: "",
        age: "",
        name: "",
        tmerber: "",
      },
      parameter2: {
        page: 1,
        num: 5,
        content: "",
      },
      parameter3: {
        page: 1,
        num: 5,
        content: "",
      },
      src:[],
      total1: 0,
      total2: 0,
      item: [],
      texta: "",
      aa:[],
      createDate: "",
      endDate: ""
    };
  },
  methods: {
    // getRowKey(row){
    //   return row.code;
    // },
    // getRowKey2(row){
    //   return row.code
    // },
    //保存数据
    save() {
      if (this.value != "") {
        if (this.createDate != "" && this.endDate != "") {
          this.item = this.value1;
          axios
            .post("/api/lqHealth/insertInterventionprogrammes", {
              tmerber: this.user.tmerber,
              name:this.user.name,
              t_Manage_templateId: this.item.ttemplateid,
              createDate: this.createDate,
              endDate: this.endDate,
            })
            .then((res) => {
              if (res.data > 0) {
                this.$message({
                  type: "success",
                  message: "选用模板制定成功",
                });
                     this.$router.push(
                "/home/intervention?breadcrunmbName=健康干预,干预方案"
              );
              } else {
                this.$message({
                  type: "error",
                  message: "用户制定了计划 或 用户正在使用干预计划",
                });
              }
            });
        } else {
          this.$message({
            type: "error",
            message: "请将时间数据填写完成!",
          });
        }
      } else {
        if (this.createDate != "" && this.endDate != "") {
          this.item = this.value1;
          let aa = [];
          let bb = [];
          this.multipleSelection1.forEach((element) => {
            aa.push(element.code);
          });
          this.multipleSelection2.forEach((element) => {
            bb.push(element.code);
          });
          axios
            .post("/api/lqHealth/insertInterventionprogrammes", {
              tmerber: this.user.tmerber,
              t_indeit_scode: JSON.stringify(aa),
              name:this.user.name,
              t_inmoving_code: JSON.stringify(bb),
              createDate: this.createDate,
              endDate: this.endDate,
            })
            .then((res) => {
              if (res.data > 0) {
                this.$message({
                  type: "success",
                  message: "自定义选择制定成功",
                });
                         this.$router.push(
                "/home/intervention?breadcrunmbName=健康干预,干预方案"
              );
              } else {
                this.$message({
                  type: "error",
                  message: "用户制定了计划 或 用户正在使用干预计划",
                });
              }
            });
        } else {
          this.$message({
            type: "error",
            message: "请将时间数据填写完成!",
          });
        }
      }
    },
    //选择模板改变
    selectption(scope) {
      this.input = scope ? scope.ttitle : "";
      this.texta = scope ? scope.ttarget : "";
      this.tdiettemplateselecteds = scope ? scope.tdiettemplateselecteds : [];
      this.tmovingtemplateselections = scope
        ? scope.tmovingtemplateselections
        : [];
      this.value = scope?scope.keywords:'';
      this.value1=scope?scope:[];
    },
    //复选框的禁用
    selectable() {
      if (this.value != "") {
        return false;
      } else {
        return true;
      }
    },
    onSubmit() {
      this.selectAllTMeals();
    },
    //运动查询
    onSubmittMentality() {
      this.selectAllTSportsItem();
    },
    //tabs的切换
    handleClick(tab, event) {
      if (tab.name == "third") {
        this.selecttMentalityResult();
      }else if(tab.name=="second"){
        this.chaImgALlLIst()
      }
    },
    handleClick2(tab, event) {
      if (tab.name == "third2") {
        this.selectAllTMeals();
      } else if (tab.name == "second2") {
        this.selectAllTSportsItem();
      }
    },
    handleSelectionTMealsChange(val) {
      this.multipleSelection1 = val;
    },
    handleSelectionTSportsItemChange(val) {
      this.multipleSelection2 = val;
    },
    handleSizeChange1() {
      this.selectAllTMeals();
    },
    handleCurrentChange1() {
      this.selectAllTMeals();
    },
    handleSizeChange2() {
      this.selectAllTSportsItem();
    },
    handleCurrentChange2() {
      this.selectAllTSportsItem();
    },
    //查询体质监测信息
    selecttMentalityResult() {
      this.tbodytypeValue = [];
      this.tmentalityValue = [];
      let aa = {};
      let bb = {};
      axios
        .post("/api/lqHealth/selecttMentalityResultBytmerBer", {
          tMemberId: this.user.tmerber,
        })
        .then((res) => {
          aa = res.data.tbodyType;
          bb = res.data.tmentalityResult;
          this.tbodytypeValue.push(aa);
          this.tmentalityValue.push(bb);
        });
    },
    //所有的饮食信息并胖断选择
    selectAllTMeals() {
      axios
        .post("/api/lqHealth/selectAllTMeals", this.parameter2)
        .then((res) => {
          this.AllTMeals = res.data.list;
          this.parameter2.page = res.data.pageNum;
          this.parameter2.num = res.data.pageSize;
          this.total1 = res.data.total;
          if (this.value != "") {
            this.$nextTick(() => {
              for (let i = 0; i < this.AllTMeals.length; i++) {
                for (let j = 0; j < this.tdiettemplateselecteds.length; j++) {
                  //两个数组做比对,选中的做勾选
                  if (
                    this.AllTMeals[i].code ==
                    this.tdiettemplateselecteds[j].tdeitScode
                  ) {
                    this.$refs.zttable.toggleRowSelection(this.AllTMeals[i]);
                  }
                }
              }
            });
          }
        });
    },
    //所有的运动信息并胖断选择
    selectAllTSportsItem() {
      axios
        .post("/api/lqHealth/selectAllTSportsItem", this.parameter3)
        .then((res) => {
          this.AllTSportsItem = res.data.list;
          this.parameter3.page = res.data.pageNum;
          this.parameter3.num = res.data.pageSize;
          this.total2 = res.data.total;
          if (this.value != "") {
            this.$nextTick(() => {
              for (let i = 0; i < this.AllTSportsItem.length; i++) {
                for (
                  let j = 0;
                  j < this.tmovingtemplateselections.length;
                  j++
                ) {
                  //两个数组做比对,选中的做勾选
                  if (
                    this.AllTSportsItem[i].code ==
                    this.tmovingtemplateselections[j].tmovingCode
                  ) {
                    this.$refs.zttable2.toggleRowSelection(
                      this.AllTSportsItem[i]
                    );
                  }
                }
              }
            });
          }
        });
    },
    //查询所有的模板
    selectAllTTemplatemanage() {
      axios.get("/api/lqHealth/AllTTemplatemanage").then((res) => {
        this.options = res.data;
      });
    },
    //查询病例信息
    selectdynamicinfo(payload){
              axios.get("/api/TMemberExaminationByidAll",{params:{id:payload}}).then(data=>{
                this.aa=data.data
        })
    },
    //查找体检信息
    chaImgALlLIst(){
         axios.get("/api/ImgALlLIst",{params:{"id":this.user.tmerber}}).then(data=>{
              this.src=data.data
            })
    }
  },
  created() {
        this.tInterposeClassify = this.$route.query.value;
     if(this.tInterposeClassify.filenumber==null){
       this.$router.push("/home/intervention?breadcrunmbName=健康干预,干预方案")
     }else{
     this.selectAllTTemplatemanage();
     console.log(this.tInterposeClassify)
     this.selectdynamicinfo(this.tInterposeClassify.filenumber);
      this.user.name=this.tInterposeClassify.name
      this.user.sex=this.tInterposeClassify.sex
      this.user.age=this.tInterposeClassify.age
      this.user.tmerber=this.tInterposeClassify.torder.toOrderno
     }
  },
});
</script>

<style scoped>
.mian {
  width: 100%;
  height: 100vh;
  background-color: white;
  flex-wrap: wrap;
  display: flex;
  justify-content: flex-start;
}
.rigth {
  width: 47%;
  height: 100vh;
  background-color: eee;
  text-align: center;
  box-shadow: 0 0 0.1rem;
}
.left {
  width: 51%;
  height: 100vh;
  background-color: eee;
  text-align: center;
  margin-right: 10px;
  box-shadow: 0 0 0.1rem;
}
.textarea {
  width: 100%;
  min-height: 100px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.textarea > div {
  width: 100px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.textarea > textarea {
  width: calc(75% - 100px);
  min-height: 90px;
  border-radius: 5px;
  border: 1px solid rgba(0, 0, 0, 0.271);
  transition: 0.3s;
  outline: none;
  padding: 10px;
}
.textarea > textarea:focus {
  border-color: #409eff;
}
.option {
  margin-top: 10px;
  width: 100%;
  min-height: 50px;
  padding-left: 10px;

  display: flex;
  justify-content: center;
  align-items: center;
}
.option > div {
  width: 50%;
  height: 100%;

  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.option > div .title {
  width: 100px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.option > div .content {
  width: calc(100% - 100px);

  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding-left: 10px;
}
.but {
  float: right;
  margin-right: 100px;
}
.Text {
  width: 300px;
  float: left;
  display: flex;
  justify-content: space-between;
  margin-left: 30px;
  margin-top: 15px;
}
.Text div:nth-child(2) {
  margin-right: 100px;
}
</style>